<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <th:block th:include="include :: header('产品列表')" />
    </head>
    <body class="gray-bg">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 search-collapse">
                    <form id="pro-form">
                        <div class="select-list">
                            <ul>
                                <li>
                                    产品编号：<input type="text" name="pid"/>
                                </li>
                                <li>
                                    产品名称：<input type="text" name="pname"/>
                                </li>
                                <li>
                                    产品系列：<select name="productSeries.seriesName" th:with="productSeries=${@proProp.getProductSeries()}">
                                    <option value="">---请选择产品系列---</option>
                                    <option th:each="ps : ${productSeries}" th:text="${ps.seriesName}" th:value="${ps.seriesName}"></option>
                                </select>
                                </li>
                                <li>
                                    产品风格：<select name="productStyle.styleName" th:with="productStyle=${@proProp.getProductStyle()}">
                                    <option value="">---请选择产品风格---</option>
                                    <option th:each="ps : ${productStyle}" th:text="${ps.styleName}" th:value="${ps.styleName}"></option>
                                </select>
                                </li>
                                <li>
                                    产品规格：<select name="productSpec.specName" th:with="productSpec=${@proProp.getProductSpec()}">
                                    <option value="">---请选择产品规格---</option>
                                    <option th:each="ps : ${productSpec}" th:text="${ps.specName}" th:value="${ps.specName}"></option>
                                </select>
                                </li>
                                <li>
                                    产品材质：<select name="productMaterial.materialName" th:with="proMaterial=${@proProp.getProductMaterial()}">
                                    <option value="">---请选择产品材质---</option>
                                    <option th:each="m : ${proMaterial}" th:text="${m.materialName}" th:value="${m.materialName}"></option>
                                </select>
                                </li>
                                <li>
                                    产品类型：<select name="productClass.className" th:with="proClass=${@proProp.getProductClass()}">
                                    <option value="">---请选择产品类型---</option>
                                    <option th:each="c : ${proClass}" th:text="${c.className}" th:value="${c.className}"></option>
                                </select>
                                </li>
                                <!--尝试失败getProductClass productMaterial.materialName-->
<!--                                <li>-->
<!--                                    <label>价格区间： </label>-->
<!--                                    <input type="text" id="minPrice" placeholder="预算打底" name="params[minPrice]"/>-->
<!--                                    <span>-</span>-->
<!--                                    <input type="text" id="maxPrice" placeholder="预算上限" name="params[maxPrice]"/>-->
<!--                                </li>-->
                                <li>
                                    进口在途：<select name="imp" th:with="type=${@dict.getType('sys_yes_no')}">
                                    <option value="">Y/N</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>

                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:config:add">
                        <i class="fa fa-plus"></i> 新增
                    </a>
                    <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:config:remove">
                        <i class="fa fa-remove"></i> 删除
                    </a>
                    <a class="btn btn-info btn-xs " th:href="'/product/pic'">
                        <i class="fa fa-remove"></i> 修改展示图片
                    </a>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
        <th:block th:include="include :: footer" />
        <script th:inline="javascript">
            var editFlag = [[${@permission.hasPermi('system:config:edit')}]];
            var removeFlag = [[${@permission.hasPermi('system:config:remove')}]];
            var datas = [[${@dict.getType('sys_yes_no')}]];
            var detailFlag = [[${@permission.hasPermi('monitor:operlog:detail')}]];
            var prefix = ctx + "product/menu";

            $(function() {
                var options = {
                    url: prefix + "/list",
                    createUrl: prefix + "/add",
                    updateUrl: prefix + "/edit/{id}",
                    removeUrl: prefix + "/remove",
                    detailUrl: prefix + "/detail/{id}",
                    sortName: "pid",
                    modalName: "产品",
                    columns: [{
                        checkbox: true
                    },
                        {
                            field: 'pid',
                            title: '编号',
                            sortable: true
                        },
                        {
                            field: 'pname',
                            title: '名称',
                        },
                        {
                            title: '图片',
                            formatter: function(value, row, index) {
                                return $.table.imageView(row.productPic.picUrl);
                            }
                        },
                        {
                            field: 'productSeries.seriesName',
                            title: '系列',
                        },
                        {
                            field: 'productStyle.styleName',
                            title: '风格',
                        },
                        {
                            field: 'productSpec.specName',
                            title: '规格',
                        },
                        {
                            field: 'productMaterial.materialName',
                            title: '材质',
                        },
                        {
                            field: 'productClass.className',
                            title: '类型',
                        },
                        {
                            field: 'imp',
                            title: '进口在途',
                            align: 'center',
                            formatter: function(value, row, index) {
                                return $.table.selectDictLabel(datas, value);
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            formatter: function(value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.pid + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                                actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.pid + '\')"><i class="fa fa-search"></i>详细资料</a>');
                                return actions.join('');
                            }
                        }]
                };
                $.table.init(options);
            });
        </script>
    </body>
</html>